'use strict'
import { Text, View, ScrollView } from '../../component/index'
import globalStyle from '../css.css'
import style from './css.css'
import ScrollViewBase from './scrollViewBase'
import ScrollViewHorizontal from './scrollViewHorizontal'
import ScrollViewBarsAndBounce from './scrollViewBarsAndBounce'
class Scroll extends React.Component {
  _renderScrollItems (dir) {
    const views = []
    for (let index = 0; index < 10; index++) {
      views.push(
        <View
          key={index}
          className={style[`${dir}ScrollViewItem`]}/>
      )
    }
    return views
  }

  render () {
    return (
      <View className={ style.container } >
        <ScrollView className={globalStyle.scrollContainer}>
          <Text className={globalStyle.title1}>ScrollView 滑动控件</Text>
          <ScrollViewBase>{this._renderScrollItems('vertical')}</ScrollViewBase>
          <ScrollViewHorizontal>{this._renderScrollItems('horizontal')}</ScrollViewHorizontal>
          <ScrollViewBarsAndBounce>{this._renderScrollItems('horizontal')}</ScrollViewBarsAndBounce>
        </ScrollView>
      </View>
    )
  }
}
export default Scroll
